<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax接受服务器端返回的信息并显示</title>

</head>
<body>
    <h2>Ajax接受服务器端返回的信息并显示</h2>
    <input type="button" value="响应" id="button01">
    <hr>
    <div id="result"></div>

    <script type="text/javascript">
        /**
         * ajax对象的成员
         * 属性：
         *      responseText：以字符串形式接受服务器端返回的信息
         *      readyState:
         *          0：刚创建ajax对象
         *          1：已经调用open方法
         *          2：已经调用send方法
         *          3：已经返回部分数据
         *          4：状态返回数据已经完全返回
         *      onreadystatechange：事件：当ajax状态readyState发生变化的时候需要触发执行
         *          为了获取较多的状态，最好在ajax对象之后就进行设置
         *          最多可以感知1、2、3、4四种状态
         *
         * 方法：
         *      open() 创建新的http请求
         *      send() 把请求发送给服务器端
         */

        document.getElementById("button01").onclick = function(){

            //创建对象
            var xhr = new XMLHttpRequest();

            //给ajax设置事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    document.getElementById("result").innerHTML = xhr.responseText;

                }
            }

            //创建新的http请求
            xhr.open('get', './05serverTest.php');

            //发送请求
            xhr.send(null);
        }
    </script>
</body>
</html>